<template>
    <!-- 查看公告 -->
    <div class="lok-box">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/loginRedirect' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公告管理</el-breadcrumb-item>
            <el-breadcrumb-item>查看公告</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 筛选框 -->
        <div style="margin-top:20px">
            <span>请选择状态</span>
            <el-select v-model="noteState" placeholder="请选择状态" @change="changeNoteState()">
                <!-- <el-option label="全部" value="全部"></el-option> -->
                <el-option label="发布成功" value="发布成功"></el-option>
                <el-option label="已隐藏" value="已隐藏"></el-option>
            </el-select>
        </div>
        <div class="note-content" v-for="(item,index) in noteData" :key="index">
            <el-alert
                class="note-alert"
                :title=" '标题:' + item.noteTitle +' | '+ '日期:' + item.noteDate + '作者:' + item.staffName"
                :description="item.noteDetail"
                v-if="item.noteState === 0 ? alertType='success' : alertType='warning' "
                :type="alertType"
                effect="dark"
                :closable="false"
                show-icon>
            </el-alert>
            <el-button type="primary" size="small" class="btn1" v-if="item.noteState === 0" @click="readHide(item.strNid)">已读(隐藏)</el-button>
            <el-button type="warning" size="small" class="btn2" v-if="item.noteState === 1" @click="cancelHide(item.strNid)">取消隐藏</el-button>
            <el-button type="success" size="small" class="btn3" @click="previewNote(item)">预 览</el-button>
            <el-button type="danger" size="small" class="btn3" @click="deleteNote(item)">删 除</el-button>
        </div>
        <!-- 分页 -->
        <el-pagination
            class="el-fenye"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="noteForm.page"
            :page-sizes="[6, 7, 8]"
            :page-size="noteForm.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totals">
        </el-pagination>
        <el-dialog title="公告预览" :visible.sync="previewNoteVisibleDiolog">
            <el-form :model="previewForm">
                <el-form-item label="公告标题" :label-width="formLabelWidth">
                    <el-input v-model="previewForm.noteTitle" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="公告内容" :label-width="formLabelWidth">
                    <el-input v-model="previewForm.noteDetail" type="area" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="发布日期" :label-width="formLabelWidth">
                    <el-input v-model="previewForm.noteDate" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="公告状态" :label-width="formLabelWidth">
                    <el-input v-if="previewForm.noteState === 0 ? previewState='已发布,正常显示' : previewState='已发布,并隐藏' " v-model="previewState" autocomplete="off" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="previewNoteVisibleDiolog = false">取 消</el-button>
                <el-button type="primary" @click="previewNoteVisibleDiolog = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            alertType:0,
            noteData:[],
            noteState:'',
            noteForm:{
                page:1,
                size:8,
                noteState:0,
                noteTitle:'',
                noteText:''
            },
            totals:0,
            formLabelWidth: '120px',
            previewNoteVisibleDiolog:false,
            previewForm:{
                noteTitle:'',
                noteDetail:'',
                noteDate:'',
                noteState:''
            },
            previewState:'',
            curruser:{}
        }
    },
    created(){
        this.getNoteData();
        this.curruser = JSON.parse(sessionStorage.getItem("user"));
    },
    filters:{
        previewState(val){
            if(val === 0){
                return '已发布,正常显示';
            }else{
                return '已发布,并隐藏';
            }
        }
    },
    methods:{
        // 数据
        getNoteData(){
            this.$http.post('/noticeInfo/getNoticeByPage', this.noteForm).then((res=>{
                // console.log(res.data);
                if(res.code ===200){
                    if(res.data.noteList.length === 0){
                        this.noteData = [];
                        this.totals = 0;
                        return this.$message.warning('暂无数据!!!');
                    }
                    this.noteData = res.data.noteList;
                    this.totals = res.data.totals - 0;
                }else{
                    this.$message.error('获取数据失败,请联系管理员!!!');
                }
            })).catch((err)=>{
                this.$message.error('获取数据失败,请联系管理员!!!');
            });
        },
        // 选择筛选
        changeNoteState(){
            var state = this.noteState;
            switch(state){
                case '全部':
                    this.noteForm.noteState = 2;
                    break;
                case '发布成功':
                    this.noteForm.noteState = 0;
                    this.getNoteData();
                    break;
                case '已隐藏':
                    this.noteForm.noteState = 1;
                    this.getNoteData();
                    break;
                default:
                    break;
            }
            this.getNoteData();
        },
        //隐藏
        readHide(val){
            this.$confirm('确定要隐藏该公告?, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let noteId = val;
                this.$http.post('/noticeInfo/hideNotice',{noteId}).then((res=>{
                    if(res.code === 200 && res.data){
                        this.$message.success('隐藏成功!!!');
                        this.getNoteData();
                    }else{
                        this.$message.error('未登录,请先登录!!!');
                    }
                })).catch((err)=>{
                    this.$message.error('隐藏失败,请联系管理员!!!');
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消隐藏!!!'
                });
            });
        },
        //取消隐藏
        cancelHide(val){
            this.$confirm('确定要显示该公告?, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let noteId = val;
                this.$http.post('/noticeInfo/cancelHideNotice',{noteId}).then((res=>{
                    if(res.code === 200 && res.data){
                        this.$message.success('显示成功!!!');
                        this.getNoteData();
                    }else{
                        this.$message.error('未登录,请先登录!!!');
                    }
                })).catch((err)=>{
                    this.$message.error('取消隐藏失败,请联系管理员!!!');
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消隐藏!!!'
                });
            });
        },
        //预览
        previewNote(item){
            // console.log(item);
            this.previewForm = item;
            // console.log(item);
            this.previewNoteVisibleDiolog = true;
        },
        handleSizeChange(val) {
            this.noteForm.size = val;
            this.getNoteData();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.noteForm.page = val;
            this.getNoteData();
            console.log(`当前页: ${val}`);
        },
        deleteNote(item){
            if(item.userId !== this.curruser.userId){
                return this.$message.warning("非本人发布公告,不支持删除操作!!!");
            }
            this.$confirm('确定要删除该公告?, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let noteId = item.nid;
                this.$http.get('/noticeInfo/deleteNote?noteId='+noteId).then((res=>{
                    if(res.code === 200 && res.data){
                        this.$message.success('删除成功!!!');
                        this.getNoteData();
                    }else{
                        this.$message.error('删除失败,请联系管理员!!!');
                    }
                })).catch((err)=>{
                    this.$message.error('删除失败,请联系管理员!!!');
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除!!!'
                });
            });
        }
    }
}
</script>

<style scoped>
.lok-box .note-content{
    margin-top:15px;
    /* width: 70%; */
    /* float: left; */
}
.lok-box .note-content .note-alert{
    width: 60%;
    float: left;
}
.lok-box .note-content .btn1{
    margin-top:20px;
    margin-left: 5%;
}
.lok-box .note-content .btn2, .btn3{
    margin-top:20px;
    margin-left: 5%;
}
.lok-box .el-fenye{
    clear: both;
    margin-top:20px;
}

</style>
